<!-- 滑动条组件 -->
<template>
	<view class="slider">

		<!-- h5平台 -->
		<!-- #ifdef H5 -->
		<van-slider range active-color="#ec606f" button-size="48rpx" :max="max" :min="min" v-model="value"
			@change="onChange">

			<template #left-button>
				<div class="left button">{{ value[0] }}</div>
			</template>

			<template #right-button>
				<div class="right button">{{ value[1] }}</div>
			</template>

		</van-slider>
		<!-- #endif -->

		<!-- 微信小程序平台 -->
		<!-- #ifdef MP-WEIXIN || APP -->
		<RangeSlider v-if="!update" active-color="#ec606f" :min="min" :max="max" :values="value" :width="slideWidth"
			:height="slideHeight" :blockSize="slideBlockSize" :step="step" :liveMode="isLiveMode"
			@rangechange="onRangeChange">
			<!-- 左边滑块的内容 -->
			<view slot="minBlock" class="left button">{{ value[0] }}</view>

			<!-- 右边滑块的内容 -->
			<view slot="maxBlock" class="right button">{{ value[1] }}</view>
		</RangeSlider>
		
		<!-- 放置一个相同的组件，这样在重置的过程中就不会因为if闪烁一下了 -->
		<RangeSlider v-if="update" active-color="#ec606f" :min="min" :max="max" :values="value" :width="slideWidth"
			:height="slideHeight" :blockSize="slideBlockSize" :step="step" :liveMode="isLiveMode"
			@rangechange="onRangeChange">
			<!-- 左边滑块的内容 -->
			<view slot="minBlock" class="left button">{{ value[0] }}</view>
		
			<!-- 右边滑块的内容 -->
			<view slot="maxBlock" class="right button">{{ value[1] }}</view>
		</RangeSlider>
		
		<!-- #endif -->

	</view>
</template>

<script>
	/**
	 * 微信小程序平台
	 */
	// #ifdef MP-WEIXIN
	import RangeSlider from '@/components/range-slider/range-slider.vue';
	// #endif

	/**
	 * h5和app平台
	 */
	// #ifdef H5 || APP

	// 引入双头滑动组件
	import Slider from 'vant/lib/slider';
	import 'vant/lib/slider/style';

	// #endif

	export default {
		props: {
			/**
			 * 值的title
			 */
			title: {
				type: String,
				default: '',
			},

			/**
			 * 默认选中值
			 */
			valueInit: {
				type: Array,
				default: () => []
			},

			/**
			 * 默认取值范围
			 */
			sectionData: {
				type: Array,
				default: () => []
			},
			
			/**
			 * 是否重置
			 */
			update:{
				type:Boolean,
				default: false
				
			},
			
			/**
			 * 修改是否重置
			 */
			setUpDate:{
				type:Function,
				default: ()=>{}
			}
			
		},
		components: {

			// h5和app
			// #ifdef H5 || APP
			['van-slider']: Slider,
			// #endif


			// 微信小程序
			// #ifdef MP-WEIXIN
			RangeSlider
			// #endif
		},
		data() {

			return {
				value: [], // 当前值
				max: '', // 最大值
				min: '', // 最小值

				slideWidth: 502, // 组件宽度
				slideHeight: 100, // 组件高度
				slideBlockSize: 56, // 滑块大小
				isLiveMode: true, // 是否即时刷新数据
				step: 1, // 步长

			};
		},
		created() {
			this.value = this.valueInit
			this.min = this.sectionData[0]
			this.max = this.sectionData[1]
		},
		watch: {
			/**
			 * 当值发生变化
			 */
			valueInit() {
				this.value = this.valueInit
			},
			
			/**
			 * 是否重置
			 */
			update(){
				if(this.update){
					this.$emit('setUpDate')
				}
			}
		},
		methods: {
			
			// #ifdef H5 || APP
			/**
			 * 修改滑动条
			 */
			onChange(value) {
				this.$emit('submit', {
					title: this.title,
					value: value
				})
			},
			// #endif
			
			
			// #ifdef MP-WEIXIN || APP
			/**
			 * 完成一次拖动后
			 */
			onRangeChange: function(e) {
				this.value = [Number(e.minValue), Number(e.maxValue)];

				this.$emit('submit', {
					title: this.title,
					value: this.value
				})
			},
			
			// #endif
		}
	}
</script>

<style lang="less" scoped>
	.slider {
		width: 100%;
		#flex(-, center, center);

		.button {
			#box(56rpx, 56rpx, 50%, #fff);
			#flex(-, center, center);
			#font(24rpx, #ec606f);
			box-shadow: 0 0rpx 6rpx rgba(#000, .3)
		}
	}
</style>